<template>
  <div>
    <el-container v-if="show">
      <el-main>
        <el-col :span="8">
          <div id="total" style="width:99%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div id="sur" style="width:99%;height:300px;"></div>
        </el-col>
        <el-col :span="8">
          <div id="ass" style="width:99%;height:300px;"></div>
        </el-col>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {},
  data() {
    return {
      show:false
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    init(obj) {
      this.show = true;
      this.$nextTick(() => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.loadTotal(obj.jjxFl);
            this.loadSur(obj.jjxFlYf);
            this.loadAss(obj.jjxFlSy);
          }, 100)
        })
      })
    },
    //总额
    loadTotal(total) {
      var colors = ["#da4996", "#6cb7b3", "#f1c51e", "#d2c72d", "#7a8c62", "#cdafb1", "#8bc561", "#c45c81", "#6882bf", "#4f5a89"];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (total.length > 0) {
        vo = [];
      }
      for (var i = 0; i < total.length; i++) {
        vo.push({
          value: total[i].jjxJe,
          name: total[i].jjxName,
        });
      }
      var chartDom = document.getElementById('total');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '奖金项-分类汇总',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '分类奖金项',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {

            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex%10];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: false,
              position: 'inside',
              formatter: "{b}:{d}%"
            },
          },
        }]
      };
      option && myChart.setOption(option);
    },
    //已分配
    loadSur(sur) {
      var colors = ["#cddb79", "#ba81b6", "#e47a48", "#e94f4d", "#954395", "#cae3bb", "#e95297", "#d8bf8d", "#2d5caa", "#689797"];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (sur.length > 0) {
        vo = [];
      }
      for (var i = 0; i < sur.length; i++) {
        vo.push({
          value: sur[i].jjxJe,
          name: sur[i].jjxName,
        });
      }
      var chartDom = document.getElementById('sur');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '奖金项-已分配奖金',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '已分奖金项',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex%10];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: false,
              position: 'inside',
              formatter: "{b}:{d}%"
            },
          },
        }]
      };
      option && myChart.setOption(option);
    },
    //剩余
    loadAss(ass) {
      var colors = ["#efa832", "#c44393", "#6d60a8", "#782e8f", "#134665", "#ccdac1", "#82c9c1", "#dc609f", "#6d8bb1", "#78511e"];
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].jjxName);
        voValues.push(ass[i].jjxJe);
      }
      var chartDom = document.getElementById('ass');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '奖金项-剩余奖金',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: names
        },
        grid: {
          left: '18%',
          // right: '4%',
          // bottom: '3%',
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: [{
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[params.dataIndex%10];
              }
            },
          },
          data: voValues,
          type: 'bar'
        }]
      };
      option && myChart.setOption(option);
    },
  }
}

</script>
<style scoped>

</style>
